<template>
    <div class="app-container">
        <el-table :data="commentList" style="width: 100%" border stripe>
            <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="100" align="center"></el-table-column>
            <el-table-column prop="content" label="评论内容" align="center"></el-table-column>
            <el-table-column prop="createDate" label="评论时间" width="180" align="center"></el-table-column>
            <el-table-column prop="blog.title" label="所属文章" width="180" align="center"></el-table-column>
            <el-table-column prop="avatar" label="用户头像" width="180" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" style="width: 50px; height: 50px;">
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change.sync="handleCurrentChange"
            @pre-click="handlePreClick"
            @next-click="handleNextClick"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="eachPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>
</template>

<script>
import { getComment, delOneComment } from '@/api/comment'
import { server_URL } from '@/urlConfig'
import { formatDate } from '@/utils/formatDate'

export default {
    name: 'Comment',
    data() {
        return {
            commentList: [],
            listLoading: false,
            count: 0,
            currentPage: 1,
            eachPage: 10,
            totalPage: 1,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            getComment(this.currentPage, this.eachPage).then(({ data }) => {
                this.listLoading = false
                this.commentList = data.rows
                for (let i of this.commentList) {
                    // i.avatar2 = server_URL + i.avatar
                    i.createDate = formatDate(i.createDate)
                }
                this.count = data.total
                this.totalPage = Math.ceil(this.count / this.eachPage)
                if (this.totalPage < this.currentPage) {
                    this.currentPage = this.totalPage
                    this.fetchData()
                }
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData()
        },
        handleSizeChange(val) {
            this.eachPage = val
            this.currentPage = 1
            this.fetchData()
        },
        handlePreClick() {
            this.currentPage--
            this.fetchData()
        },
        handleNextClick() {
            this.currentPage++
            this.fetchData()
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delOneComment(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">

</style>
